<template>
    <div class="asnBillDetail">
        <div class="headerBtns">
            <el-button
                    size="small"
                    type="primary"
                    icon="iconfont icon-zuo"
                    @click="$router.go(-1)"
            >
                返回</el-button
            >

            <el-button
                    size="small"
                    type="danger"
                    icon="iconfont icon-shanchu"
                    @click="isDelete(asnMaster.asnMasterId)"
            >
                删除
            </el-button>

        </div>


        <!--入库单据信息-->
        <div class="publicSearch">
            <div
                    class="searchBar"
                    :style="{ height: isMoreSearchMaster ? 'auto' : '' }"
            >
                <el-tabs
                        v-model="activeName"
                        @tab-click="handleClick"
                        style="width: 100%"
                >
                    <el-tab-pane
                            :label="isFile ? '入库单归档单据信息' : '入库单据信息'"
                            name="first"
                    >
                        <div class="newBillData clearFloat">
                            <ul class="leftFloat">
                                <li>
                                    <span>单号:</span>
                                    <span :title="asnMaster.billNo"
                                    >&nbsp;{{ asnMaster.billNo }}</span
                                    >
                                </li>
                                <li>
                                    <span>仓库:</span>
                                    <span
                                            :title="asnMaster.wareName"
                                    >{{ asnMaster.wareName }}</span
                                    >
                                </li>

                                <li>
                                    <span>创建人:</span>
                                    <span
                                            :title="asnMaster.createUserName"
                                    >{{ asnMaster.createUserName }}</span
                                    >
                                </li>


                                <li>
                                    <span>创建时间:</span>
                                    <span :title="asnMaster.createTime1"
                                    >&nbsp;{{ asnMaster.createTime1 }}</span
                                    >
                                </li>

                            </ul>
                            <ul class="leftFloat">

                            </ul>

                        </div>
                    </el-tab-pane>

                </el-tabs>

            </div>
            <span
                    class="moreSearchBtn"
                    :class="
          isMoreSearchMaster ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
        "
                    @click="isMoreSearchMaster = !isMoreSearchMaster"
            ></span>
        </div>



        <!--单据详情-->
        <el-tabs type="card" v-model="activeName2" @tab-click="handleClick">
            <el-tab-pane label="单据详情" name="first">
                <div class="tableBox">
                    <el-table
                            highlight-current-row
                            @selection-change="handleSelectionChange"
                            :data="asnDetails"
                            style="width: 100%"
                    >
                        <el-table-column type="selection" width="30"> </el-table-column>
                        <el-table-column fixed="left" type="index" width="30">
                        </el-table-column>

                        <el-table-column
                                show-overflow-tooltip
                                prop="itemName"
                                label="物料信息"
                                min-width="150"
                        >
                            <template slot-scope="scope">
                                <el-row :gutter="10">
                                    <el-col :span="16">
                                        <div
                                                @click="
                                                $EventBus.$emit(
                                                  'showPublicModal',
                                                  scope.row.itemCode,
                                                  'item'
                                                )
                                              "
                                                style="
                                            display: inline-block;
                                            margin-left: 5px;
                                            height: 86px;
                                          "
                                        >
                      <span class="textBtn" style="color: red">{{
                          scope.row.itemCode
                          }}</span>
                                            <br />
                                            <span>{{ scope.row.itemName }}</span>
                                            <br />
                                            <span>{{ scope.row.spec }}</span>
                                            <br />
                                            <span>{{ scope.row.model }}</span>
                                        </div>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>

                        <el-table-column show-overflow-tooltip label="状态" min-width="100">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.acceptQuantity === 0" type="info"
                                >待验收</el-tag
                                >
                                <el-tag
                                        v-else-if="
                    scope.row.acceptQuantity > 0 &&
                    scope.row.acceptQuantity < scope.row.expectQuantity
                  "
                                >
                                    部分验收
                                </el-tag>
                                <el-tag
                                        v-else-if="
                    scope.row.acceptQuantity > 0 &&
                    scope.row.acceptQuantity === scope.row.expectQuantity
                  "
                                        type="success"
                                >全部验收
                                </el-tag>
                                <el-tag
                                        v-else-if="
                    scope.row.acceptQuantity > 0 &&
                    scope.row.acceptQuantity > scope.row.expectQuantity
                  "
                                        type="danger"
                                >超额验收
                                </el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column
                                show-overflow-tooltip
                                prop="acceptQuantity"
                                label="验收数"
                                min-width="100"
                        >
                            <template slot-scope="scope">
                <span style="font-size: 20px"
                >{{
                    scope.row.expectQuantity
                    }}</span
                >
                            </template>
                        </el-table-column>
                        <el-table-column
                                show-overflow-tooltip
                                prop="packDescribe"
                                label="单位"
                                width="80"
                        >
                        </el-table-column>

                        <el-table-column
                                show-overflow-tooltip
                                prop="acceptTime"
                                label="验收时间"
                                min-width="110"
                        >
                        </el-table-column>
                        <el-table-column
                                v-if="
                (asnMaster.insertType === 0 && asnMaster.asnState !== 3) ||
                (asnMaster.insertType === 0 && asnMaster.asnState !== 5) ||
                (asnMaster.insertType === 0 && asnMaster.asnState !== 4)
              "
                                fixed="right"
                                label="操作"
                                min-width="60"
                        >

                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>


        </el-tabs>
    </div>
</template>

<script>
    import { mapState } from "vuex";
    import ReviewStepBox from "@/components/ReviewStepBox";

    export default {
        name: "MissionDetail",
        components: {
            ReviewStepBox,
        },
        data() {
            return {
                isMoreSearch: false,
                isMoreSearchMaster: true,
                activeName: "first",
                activeName2: "first",

                searchData: {
                    billNo: this.$route.params.billNo,
                },

                asnMaster: {},
                asnDetails: [],
                asnShipDetails: [],
                acceptRecords: [],
                exDetails: [],
                form: {
                    asnMaster: {},
                    asnDetails: [],
                },
                ids: [],
                items: [],
                suppliers: [],
                organizations: [],
                multipleSelection: [],
                multipleSelection2: [],

                rules: {
                    buyType: [{ required: true, message: "请选择供应商", trigger: "blur" }],
                },

                formLabelWidth: "120px",



            };
        },
        computed: {
            ...mapState([
                "qcStates",
            ]),

            isFile() {
                if (this.$route.params.fileUserId) {
                    return true;
                } else {
                    return false;
                }
            },
        },
        watch: {},
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            getAsnMasterData() {
                let url = "";
                if (this.isFile) {
                    url = "/asn/master/files/list";
                } else {
                    url = "/asn/masters/list";
                }
                IOT.getServerData(
                    url,
                    "get",
                    { billNo: this.searchData.billNo },
                    (ret) => {
                        if (ret.code === 200) {
                            let list = ret.rows[0];
                            if (PF.isNull(list.createTime)) {
                                list.createTime1 = list.createTime.substr(5, 11);
                            }
                            if (PF.isNull(list.expectTime)) {
                                list.expectTime1 = list.expectTime.substr(5, 11);
                            }
                            this.asnMaster = list;
                        } else {
                            IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
                        }
                    }
                );
            },
            getAsnDetailData() {
                let url = "";
                if (this.isFile) {
                    url = "/asn/detail/files/list";
                } else {
                    url = "/asn/details/list";
                }
                IOT.getServerData(url, "get", this.searchData, (ret) => {
                    if (ret.code === 200) {
                        let list = ret.rows;
                        for (let i = 0; i < list.length; i++) {
                            list[i].packExpectQuantity =
                                list[i].expectQuantity / list[i].transRatio;
                            list[i].packAcceptQuantity =
                                list[i].acceptQuantity / list[i].transRatio;
                        }
                        this.asnDetails = ret.rows;
                        this.searchData.total = ret.total;
                        this.searchData.pageNum = ret.pageNumber;
                    } else {
                        IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
                    }
                });
            },

        },
        created() {
            this.getAsnMasterData();
            this.getAsnDetailData();
            PF.getDataDictUdfData("asnType", (rows) => {
                this.asnTypes = rows;
            });
        },
        mounted() {},
    };
</script>

<style scoped lang="less">
    .asnBillDetail {
    }
</style>
